<script setup>
import { ref } from 'vue'
import axios from 'axios';

// A "ref" is a reactive data source that stores a value.
// Technically, we don't need to wrap the string with ref()
// in order to display it, but we will see in the next
// example why it is needed if we ever intend to change
// the value.

const message = ref({
    welcome:'json',
    id:3,
    
    name:'peter'
})
const list = ref([1,2,3,4])
let jsonData = [];
// const mdata = ref(dd)
axios.get('/Users/kisszpy/Desktop/code/vue-hello/helloWorld/src/data.json')
      .then(response => {
        console.log('this sdata',response.data)
      })
      .catch(error => {
        console.error('Fetching data failed:', error);
      });
</script>

<template>
  <h1>{{ message.welcome }}</h1>
  <h1>{{ message.id }}</h1>
  <h1>{{ message.name }}</h1>
    <div v-for="item in list">{{ item }}</div>
    <select>
        <option v-for="item in list">{{ item }}</option>
    </select>
</template>

